import React, { Component } from 'react';
import { Route, withRouter } from 'react-router-dom'
import {TabBar} from 'antd-mobile'
import { EyeOutline, AppstoreOutline, SmileOutline, CollectMoneyOutline } from 'antd-mobile-icons'
import "../styles/Tabbar.scss"
class Tabbar extends Component {
    state = {
        tabs: [
            {
                key: '/index/home',
                title: '发现',
                icon: <EyeOutline />
            },
            {
                key: '/index/bookcity',
                title: '书城',
                icon: <AppstoreOutline />,
            },
            {
                key: '/index/bookshelf',
                title: '书架',
                icon: <CollectMoneyOutline />,
            },
            {
                key: '/index/mine',
                title: '我的',
                icon: <SmileOutline />,
            },
        ]
    }
    handleChange(key){
        if( key == '/index/allgood' ){
            this.props.history.push({ pathname:key});

        }else{
            this.props.history.push(key);
        }
    }
    render() {
        return (
            <TabBar className='tabbar' onChange={(key)=>{ this.handleChange(key); }}>
                {
                    this.state.tabs.map(item => {
                        return (
                            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                        )
                    })
                }
            </TabBar>
        );
    }
}
function myWithRouter(Com){
    return class extends Component {
        render() {
            return (
                <Route component={Com} />
            );
        }
    }
}
export default withRouter (Tabbar);